<template>
    <view :style="style" class="cu-custom__1 flex align-center">
        <view class="left" :class="{'flex-sub':backType === 2}" :style="backStyle">
            <block v-if="isBack && (backType === 0 || backType === 2)">
                <view class="flex align-center back-btn" @tap.stop="handleBack">
                    <text class="tlIcon-back_dark azm-left-icon"/>
                    <view class="azm-ellipsis--l1">
                        <text>
                            <block v-if="backText && backType !== 2">{{backText}}</block>
                            <block v-else-if="backType === 2">{{title || ''}}</block>
                        </text>
                    </view>
                </view>
            </block>
            <block v-else-if="isBack && backType === 1">
                <view class="flex align-center border-custom">
                    <view v-if="backType === 1"
                          class="border-custom-back flex justify-center align-center"
                          @tap.stop="handleBack">
                        <text class="tlIcon-back_dark azm-left-icon"></text>
                    </view>
                    <view class="flex justify-center align-center" @tap.stop="handleToHome">
                        <text class="cuIcon-homefill azm-left-icon"></text>
                    </view>
                </view>
            </block>
        </view>
        <view class="content flex-sub azm-ellipsis--l1" v-if="backType !== 2">
            <text>{{title || ''}}</text>
        </view>
        <view class="right" :style="rightStyle">
            <slot name="right"></slot>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';

    export default {
        name: "cu-custom",
        data () {
            const systemInfo = this.SystemInfo || {};
            return {
                rightStyle: '',
                backStyle: '',
                windowWidth: systemInfo.windowWidth,
                //#ifdef MP-WEIXIN
                Custom: systemInfo.Custom,
                //#endif
            };
        },
        computed: {
            ...mapState({
                systemInfo: state => state.User.systemInfo
            }),
            style () {
            },
        },
        props: {
            title: String,
            backText: String,
            bgColor: {
                type: String,
                default: ''
            },
            isBack: {
                type: [Boolean, Number],
                default: false
            },
            isUnderline: Boolean,
            isCustom: {
                type: [Boolean, String],
                default: false
            },
            backType: {
                type: Number,
                default: 0
            },
            mode: String
        },
        created () {
            this.$nextTick(function () {
                this.setBackStyle()
            })
        },
        methods: {
            setBackStyle () {
                //#ifdef MP-WEIXIN
                const {object2style} = this.$util;
                const {Custom, windowWidth} = this.systemInfo;
                let l = windowWidth - Custom.right;
                console.log(Custom, windowWidth);
                this.Custom = Custom;
                this.rightStyle = object2style({width: (Custom.width + l) + 'px', paddingRight: l + 'px'});
                this.backStyle = object2style({width: (Custom.width + l) + 'px', paddingLeft: l + 'px'})
                //#endif
            },
            handleBack (e) {
                this.isBack && this._emit(e, 'back')
            },
            handleToHome (e) {
                this._emit(e, 'toHome')
            },
            _emit (e, t) {
                const type = e.type === 'click' ? 'tap' : e.type;
                this.$emit(`cu${this.firstToUpperCase(t || type)}`, e.detail || e)
            },
            firstToUpperCase (s) {
                return typeof s === "string" ? s.slice(0, 1).toUpperCase() + s.slice(1) : '';
            },
        }
    }
</script>

<style lang="scss" scoped>
    .cu-custom__1 .azm-left-icon.tlIcon-back_dark {
        font-size: 15*2upx;
        margin-right: 4*2upx;
    }

    .cu-custom__1 {
        font-size: 18*2upx;
        font-weight: bold;
        width: 100vw;
        height: 100%;

        .azm-left-icon {
            font-size: 19*2upx;
        }

        .left, .right {
            min-width: 89*2upx;
        }

        .right {
            padding-right: 10px;
        }

        .left {
            padding-left: 10px;
            display: flex;
            align-items: center;
            height: 100%;
            justify-content: flex-start;
            max-width: 100%;
            cursor: pointer;

            .text {
                display: block;

                &:not(.cuIcon) {
                    flex: 1;
                    font-size: 14*2upx;
                    padding-left: 3*2upx;
                }
            }

            .cuIcon {
                width: 16*2upx;
                font-size: 16*2upx;
            }
        }

        .back-btn {
            height: 100%;
            min-width: 60%;
        }

        .border-custom {
            position: relative;
            background: rgba(0, 0, 0, 0.15);
            border-radius: 1000*1upx;
            height: 30px;

            &:after {
                content: " ";
                width: 200%;
                height: 200%;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: inherit;
                transform: scale(0.5);
                transform-origin: 0 0;
                pointer-events: none;
                box-sizing: border-box;
                border: 1*1upx solid #ffffff;
                opacity: 0.5;
            }

            > .flex {
                position: relative;
                width: 79*1upx;
                font-size: 34*1upx;
            }

            .border-custom-back:before {
                content: " ";
                width: 1*1upx;
                height: 110%;
                position: absolute;
                top: 22.5%;
                left: 100%;
                right: 0;
                margin: auto;
                transform: scale(0.5);
                transform-origin: 0 0;
                pointer-events: none;
                box-sizing: border-box;
                opacity: 0.6;
                background-color: #ffffff;
            }
        }

        .content {
            padding-left: 15*2upx;
            padding-right: 15*2upx;
            text-align: center;
            color: inherit;
        }
    }
</style>
